/** @type {HTMLCanvasElement} */
const canvas2 = document.getElementById('canvas2');
const ctx2 = canvas2.getContext('2d');


CANVAS_HEIGHT2 = canvas2.height = 800;
CANVAS_WIDTH2 = canvas2.width = 400;

const numberOfEnmies2 = 20;

let gameFrame2 = 0;
const enemiesArray2 = [];

class Enemy2 {
    constructor() {

        this.speed = Math.random() * 4 + 1;
        const image = new Image();
        image.src = './enemy2.png';
        this.image = image;

        this.spriteWidth = 266;
        this.spriteHeight = 188;
        this.width = this.spriteWidth / 2.5;
        this.height = this.spriteHeight / 2.5;
        this.x = Math.random() * (canvas2.width - this.width);
        this.y = Math.random() * (canvas2.height - this.height);
        this.frame = 0;
        this.flapSeed = Math.floor(Math.random() * 3 + 1);
        this.angle = Math.random()*2;
        this.angleSpeed = Math.random()*0.2;
        this.curve = Math.random()*7;
    }
    update() {
        this.x -= this.speed;
        if (this.x + canvas.width < 0) {
            this.x = canvas.width;
        }
        this.y += this.curve*Math.sin(this.angle);
        this.angle = this.angle + this.angleSpeed;

        if (gameFrame2 % this.flapSeed === 0) {
            this.frame > 4 ? this.frame = 0 : this.frame++;
        }
    }
    draw() {
        ctx2.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
    }
}

for (let i = 0; i < numberOfEnmies2; i++) {
    enemiesArray2.push(new Enemy2())
}


function animate2() {
    ctx2.clearRect(0, 0, CANVAS_WIDTH2, CANVAS_HEIGHT2);
    enemiesArray2.forEach(enemy => {
        enemy.update();
        enemy.draw();
    });
    gameFrame2++;
    requestAnimationFrame(animate2)
}

animate2();